<template>
  <view class="order">
    <!-- 头部 -->
    <view class="top-top">
      <view class=" topbox">
        <view class="top-oneitem"></view>
        <view class="top-twoitem">
          <image src="../../static/resort/fanhui.png" class="close"></image>
          <view class="top-name">
            <image src="../../static/message/green-remind.png" class="green-message"></image>
            <view class="top-blue-tit">全网通告</view>
            <view class="top-red-add">+</view>
          </view>
          <view class=""></view>
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <view style="height: 100rpx;"></view>
    <!-- tab栏 -->
    <view class="order-tab">
      <view class="tab-top" v-for="(item,i) in tabList" :key="i" @click="tabShow=i">
        <view class="tab-item">
          <image :src="item.img" class="tab-image"></image>
          <view class="tab-tit">{{item.tit}}</view>
        </view>
        <view :class="tabShow==i?'tab-line':'active-line'"></view>
      </view>
    </view>
    <!-- 帮忙订单 -->
    <view class="tab-con-help" v-show="tabShow==0">
      <!-- 捐助 -->
      <view class="help-item">
        <view class="help-item-left">
          <view class="left-photo">
            <image src="../../static/message/user_three.png" class="user-left"></image>
            <view class="ab-image">
              <image src="../../static/message/sex_woman.png" mode=""></image>
            </view>
          </view>
          <view class="left-tit">
            私聊
          </view>
        </view>
        <view class="help-item-right">
          <view class="help-info">
            <view class="info-name">
              山村支教王老师
            </view>
            <view class="info-time">
              6分钟前·2.3km
            </view>
          </view>
          <view class="condition">
            必要条件：<text>教师&nbsp;认真&nbsp;负责</text>
          </view>
          <view class="help-con">
            <view class="help-con-left-tit">
              我们这里是四川的山区，急需要更多有爱心的老师来山区支教~
            </view>
            <view class="help-con-left-but">
              捐助
            </view>
          </view>
          <view class="help-info-money">
            <view class="help-info-money-left">
              <view class="money-name">筹款：</view>
              <view class="money-blue">￥800</view>
              <view class="money-green">/8888</view>
            </view>
            <view class="help-info-money-right">
              <view class="info-message">
                <image src="../../static/message/order-message.png" mode=""></image>
                <text>384</text>
              </view>
              <view class="info-message">
                <image src="../../static/message/hui-zan.png" v-show="!show" @click="redShow()"></image>
                <image src="../../static/message/red-zan.png" v-show="show" @click="redShow()"></image>
                <text>1.4w</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 帮助 -->
      <view class="help-item">
        <view class="help-item-left">
          <view class="left-photo">
            <image src="../../static/message/user_three.png" class="user-left"></image>
            <view class="ab-image">
              <image src="../../static/message/sex_woman.png" mode=""></image>
            </view>
          </view>
          <view class="left-tit">
            私聊
          </view>
        </view>
        <view class="help-item-right">
          <view class="help-info">
            <view class="info-name">
              山村支教王老师
            </view>
            <view class="info-time">
              6分钟前·2.3km
            </view>
          </view>
          <view class="condition">
            必要条件：<text>教师&nbsp;认真&nbsp;负责</text>
          </view>
          <view class="help-con">
            <view class="help-con-left-tit">
              我们这里是四川的山区，急需要更多有爱心的老师来山区支教~
            </view>
            <view class="help-con-left-but">
              帮助
            </view>
          </view>
          <view class="help-info-money">
            <view class="help-info-money-left">
              <view class="money-name">筹款：</view>
              <view class="money-red">10元/辆</view>
              <!-- <view class="money-green">/8888</view> -->
            </view>
            <view class="help-info-money-right">
              <view class="info-message">
                <image src="../../static/message/order-message.png" mode=""></image>
                <text>384</text>
              </view>
              <view class="info-message">
                <image src="../../static/message/hui-zan.png" v-show="show1" @click="redShow1()"></image>
                <image src="../../static/message/red-zan.png" v-show="!show1" @click="redShow1()"></image>
                <text>1.4w</text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 捐助 -->
      <view class="help-item" v-for="item in 4">
        <view class="help-item-left">
          <view class="left-photo">
            <image src="../../static/message/user_three.png" class="user-left"></image>
            <view class="ab-image">
              <image src="../../static/message/sex_woman.png" mode=""></image>
            </view>
          </view>
          <view class="left-tit">
            私聊
          </view>
        </view>
        <view class="help-item-right">
          <view class="help-info">
            <view class="info-name">
              山村支教王老师
            </view>
            <view class="info-time">
              6分钟前·2.3km
            </view>
          </view>
          <view class="condition">
            必要条件：<text>教师&nbsp;认真&nbsp;负责</text>
          </view>
          <view class="help-con">
            <view class="help-con-left-tit">
              我们这里是四川的山区，急需要更多有爱心的老师来山区支教~
            </view>
            <view class="help-con-left-but">
              捐助
            </view>
          </view>
          <view class="help-info-money">
            <view class="help-info-money-left">
              <view class="money-name">筹款：</view>
              <view class="money-blue">￥800</view>
              <view class="money-green">/8888</view>
            </view>
            <view class="help-info-money-right">
              <view class="info-message">
                <image src="../../static/message/order-message.png" mode=""></image>
                <text>384</text>
              </view>
              <view class="info-message">
                <image src="../../static/message/hui-zan.png" v-show="show" @click="redShow()"></image>
                <image src="../../static/message/red-zan.png" v-show="!show" @click="redShow()"></image>
                <text>1.4w</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 帮忙订单 -->
    <!-- 求助订单 -->
    <view class="tab-con-resort" v-show="tabShow==1">
      求助订单
    </view>
    <!-- 求助订单 -->
    <!-- 赚钱订单 -->
    <view class="tab-con-money" v-show="tabShow==2">
      <view class="all">
        <!-- 1 -->
        <view class="allitem">
          <view>
            <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;"></image>
          </view>
          <view class="allitemtext">
            <span>又大又新鲜的水果送啦
              <br />
              这里最多两行
            </span>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                0.56km
              </view>
            </view>
            <view class="address">
              武汉市·飞飞排档
            </view>
          </view>
          <view class="price">
            ￥2元/斤
          </view>
        </view>
        <!-- 2 -->
        <view class="allitem">
          <view style="position: relative;">
            <image src="../../static/resort/indeximg2.png" mode="" style="width: 100%;height: 310rpx;"></image>
            <image src="../../static/resort/need/stop.png"
              style="width:48rpx;height: 48rpx;position: absolute;top: 12rpx;left: 16rpx;" mode="" @click="tovideo()">
            </image>
          </view>
          <view class="voicebox">
            <view class="voicetext">
              这个地方显示的···60''
            </view>
            <view>
              <image src="../../static/resort/voice.png" mode="" style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
              </image>
            </view>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                645km
              </view>
            </view>
            <view class="address">
              郑州市·动物园
            </view>
          </view>
          <view class="price">
            ￥5000元/吨
          </view>
        </view>
        <!-- 3 -->
        <view class="allitem">
          <view>
            <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;"></image>
          </view>
          <view class="voicebox2">
            <view>
              <image src="../../static/resort/voice.png" mode="" style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
              </image>
            </view>
            <view class="voicetext">
              23''
            </view>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                1485km
              </view>
            </view>
            <view class="address">
              上海市·东方明珠
            </view>
          </view>
          <view class="price">
            ￥8000元/月
          </view>
        </view>
        <!-- 4 -->
        <view class="allitem">
          <view>
            <image src="../../static/resort/indeximg1.png" mode="" style="width: 100%;height: 310rpx;"></image>
          </view>
          <view class="allitemtext">
            <span>又大又新鲜的水果送啦
              <br />
              这里最多两行
            </span>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                0.56km
              </view>
            </view>
            <view class="address">
              武汉市·飞飞排档
            </view>
          </view>
          <view class="price">
            ￥2元/斤
          </view>
        </view>
        <!-- 5 -->
        <view class="allitem">
          <view>
            <image src="../../static/resort/indeximg3.png" mode="" style="width: 100%;height: 310rpx;"></image>
          </view>
          <view class="voicebox2">
            <view>
              <image src="../../static/resort/voice.png" mode="" style="width: 30rpx;height: 30rpx;margin-top: 20rpx">
              </image>
            </view>
            <view class="voicetext">
              23''
            </view>
          </view>
          <view class="allitemthreebox">
            <view class="kmbox">
              <image src="../../static/resort/dingwei-green.png" mode=""
                style="width: 22rpx;height: 24rpx;padding-top: 10rpx;"></image>
              <view class="kmboxtext">
                1485km
              </view>
            </view>
            <view class="address">
              上海市·东方明珠
            </view>
          </view>
          <view class="price">
            ￥8000元/月
          </view>
        </view>
      </view>
    </view>
    <!-- 赚钱订单 -->
    <!-- tab栏 -->
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabShow: 0,
        tabList: [{
          img: '/static/message/order-help.png',
          tit: '帮忙订单'
        }, {
          img: '/static/message/order-my-help.png',
          tit: '求助订单'
        }, {
          img: '/static/message/order-money.png',
          tit: '赚钱订单'
        }],
        show: true,
        show1: true
      }
    },
    methods: {
      redShow() {
        this.show = !this.show
      },
      redShow1() {
        this.show1 = !this.show1
      }
    }
  }
</script>

<style lang="scss">
  .order {

    // 头部
    .top-top {
      width: 100vw;
      z-index: 99;
      position: fixed;
      top: 0;
      background-color: #fff;

      .topbox {
        width: 90vw;
        margin: auto;
        justify-content: space-between;

        .top-oneitem {
          width: 100%;
          height: var(--status-bar-height);
        }

        .top-twoitem {
          height: 100rpx;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .close {
            width: 16rpx;
            height: 32rpx;
            vertical-align: middle;
          }

          .top-name {
            display: flex;
            align-items: center;

            .green-message {
              width: 48rpx;
              height: 48rpx;
              vertical-align: middle;
              margin-right: 10rpx;
            }

            .top-blue-tit {
              font-size: 32rpx;
              color: #41B1FB;
            }

            .top-red-add {
              font-size: 36rpx;
              color: #FF2A31;
            }
          }
        }
      }
    }

    // tab栏
    .order-tab {
      width: 90vw;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;

      .tab-top {
        width: 28vw;
        margin: 20rpx 0;

        .tab-item {
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 5rpx;

          .tab-image {
            width: 36rpx;
            height: 36rpx;
            margin-right: 10rpx;
          }

          .tab-tit {
            color: #333333;
          }
        }

        .tab-line {
          width: 28vw;
          height: 4rpx;
          background-color: #FF2A31;
        }

        .active-line {
          width: 28vw;
          height: 4rpx;
          background-color: #CDCDCD;
        }
      }
    }

    // 帮忙订单
    .tab-con-help {
      width: 90vw;
      margin: 0 auto;
      padding-bottom: 20rpx;

      .help-item {
        background-color: #fff;
        border-radius: 10rpx;
        padding: 24rpx;
        box-sizing: border-box;
        display: flex;
        margin: 20rpx 0;

        .help-item-left {
          width: 15vw;

          .left-photo {
            position: relative;

            .user-left {
              width: 92rpx;
              height: 92rpx;
            }

            .ab-image {
              position: absolute;
              top: 70rpx;
              left: -5rpx;

              image {
                width: 28rpx;
                height: 28rpx;
              }
            }
          }

          .left-tit {
            width: 92rpx;
            border: 1px solid #FF8083;
            color: #FF8083;
            border-radius: 30rpx;
            text-align: center;
          }
        }

        .help-item-right {
          width: 70vw;

          .help-info {
            display: flex;
            justify-content: space-between;

            .info-name {
              color: #979797;
              font-size: 26rpx;
            }

            .info-time {
              color: #CACACA;
              font-size: 26rpx;
            }
          }

          .condition {
            text {
              color: #EF272E;
            }
          }

          .help-con {
            display: flex;
            justify-content: space-between;

            .help-con-left-tit {
              width: 55vw;
            }

            .help-con-left-but {
              width: 92rpx;
              height: 50rpx;
              line-height: 50rpx;
              background-color: #EF272E;
              color: #fff;
              text-align: center;
              border-radius: 10rpx;
            }
          }

          .help-info-money {
            display: flex;
            justify-content: space-between;

            .help-info-money-left {
              display: flex;

              .money-blue {
                color: #0296FA;
              }

              .money-green {
                color: #12C366;
              }

              .money-red {
                color: #EF272E;
              }
            }

            .help-info-money-right {
              display: flex;
              align-items: center;

              .info-message {
                image {
                  width: 24rpx;
                  height: 24rpx;
                  margin-right: 5rpx;
                  vertical-align: middle;
                }

                text {
                  color: #717171;
                }
              }

              .info-message:first-child {
                margin-right: 20rpx;
              }
            }
          }
        }
      }
    }

    // 求助订单
    .tab-con-resort {
      width: 90vw;
      margin: 0 auto;
    }

    // 赚钱订单
    .tab-con-money {
      width: 90vw;
      margin: 0 auto;
      padding-top: 20rpx;

      .all {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .allitem {
          margin-bottom: 20rpx;
          width: 49%;
          padding-bottom: 20rpx;
          border-radius: 20rpx;
          background-color: white;

          .allitemtext {
            font-weight: bold;
            padding: 0 10rpx;
            box-sizing: border-box;
            font-size: 30rpx;
          }

          .voicebox {
            margin-top: 8rpx;
            margin-bottom: 10rpx;
            width: 85%;
            height: 70rpx;
            background-color: #FF6A6F;
            border-radius: 5rpx;
            margin-left: 12%;
            padding: 0 10rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            color: white;
            line-height: 70rpx;

            .voicetext {
              font-size: 26rpx;
            }
          }

          .voicebox2 {
            margin-top: 8rpx;
            margin-bottom: 10rpx;
            width: 55%;
            height: 70rpx;
            background-color: #FF6A6F;
            border-radius: 5rpx;
            margin-left: 2%;
            padding: 0 10rpx;
            box-sizing: border-box;
            display: flex;
            justify-content: left;
            color: white;
            line-height: 70rpx;

            .voicetext {
              margin-left: 10rpx;
              font-size: 26rpx;
            }
          }

          .allitemthreebox {

            display: flex;
            justify-content: space-between;
            padding: 10rpx 10rpx;
            box-sizing: border-box;

            .kmbox {
              display: flex;

              .kmboxtext {
                padding-left: 5rpx;
                font-size: 26rpx;
                color: #07C160;
              }
            }

            .address {
              font-size: 26rpx;
            }
          }

          .price {
            font-weight: bold;
            color: #FF2A31;
            font-size: 30rpx;
          }
        }
      }
    }
  }
</style>